<!-- <script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted } from "vue";
import * as XLSX from "xlsx";
const echarts1 = ref<any>(null);
type EChartsOption = echarts.EChartsOption;
let option: EChartsOption;
//右上代码
const getList = (ele: any) => {
  let myChart = echarts.init(ele.value, 'dark');
  let textt = '纠纷警情趋势'
  const data0 = splitData([
    ['第1周', 1942, 1877, 1877, 1877],
    ['第2周', 1877, 1838, 1838, 1838],
    ['第3周', 1838, 1660, 1660, 1660],
    ['第4周', 1660, 1768, 1768, 1768],
    ['第5周', 1768, 1826, 1826, 1826],
    ['第6周', 1826, 2150, 2150, 2150],
    ['第7周', 2150, 2314, 2314, 2314],
    ['第8周', 2314, 2488, 2488, 2488],
    ['9', 2488, 2433, 2433, 2433],
    ['10', 2433, 2369, 2369, 2369],
    ['11', 2369, 2203, 2203, 2203],
    ['12', 2203, 2551, 2551, 2551],
    ['13', 2551, 2436, 2436, 2436],
    ['14', 2436, 2146, 2146, 2146],
    ['15', 2146, 2507, 2507, 2507],
    ['16', 2507, 2373, 2373, 2373],
    ['17', 2373, 2382, 2382, 2382],
    ['第43周', 2382, 2530, 2530, 2530],
    ['第44周', 2530, 2409, 2409, 2409],
    ['第45周', 2409, 2410, 2410, 2410],
    ['第46周', 2410, 2346, 2346, 2346],
    ['第47周', 2346, 1995, 1995, 1995],
    ['第48周', 1995, 2505, 2505, 2505],
    ['第49周', 2505, 2246, 2246, 2246],
    ['第50周', 2246, 2408, 2408, 2408],
    ['第26周', 2408, 1877, 1877, 1877],
    ['第27周', 1877, 1838, 1838, 1838],
    ['第28周', 1838, 1660, 1660, 1660],
    ['第29周', 1660, 1768, 1768, 1768],
    ['第30周', 1768, 1826, 1826, 1826],
    ['第31周', 1826, 2150, 2150, 2150],
    ['第32周', 2150, 2314, 2314, 2314],
    ['第33周', 2314, 2488, 2488, 2488],
    ['第34周', 2488, 2433, 2433, 2433],
    ['第35周', 2433, 2369, 2369, 2369],
    ['第36周', 2369, 2203, 2203, 2203],
    ['第37周', 2203, 2551, 2551, 2551],
    ['第38周', 2551, 2436, 2436, 2436],
    ['第39周', 2436, 2146, 2146, 2146],
    ['第40周', 2146, 2507, 2507, 2507],
    ['第41周', 2507, 2373, 2373, 2373],
    ['第42周', 2373, 2382, 2382, 2382],
    ['第43周', 2382, 2530, 2530, 2530],
    ['第44周', 2530, 2409, 2409, 2409],
    ['第45周', 2409, 2410, 2410, 2410],
    ['第46周', 2410, 2346, 2346, 2346],
    ['第47周', 2346, 1995, 1995, 1995],
    ['第48周', 1995, 2505, 2505, 2505],
    ['第49周', 2505, 2246, 2246, 2246],
    ['第50周', 2246, 2408, 2408, 2408],
  ]);
  function splitData(rawData: any) {
    const categoryData = [];
    const values = [];
    for (var i = 0; i < rawData.length; i++) {
      categoryData.push(rawData[i].splice(0, 1)[0]);
      values.push(rawData[i]);
    }
    return {
      categoryData: categoryData,
      values: values
    };
  }
  function calculateMA(dayCount: any) {
    var result = [];
    // console.log(data0.values)
    for (var i = 0, len = data0.values.length; i < len; i++) {
     
      if (i < dayCount) {
        let nums = 0;
        for (var K = 0; K <= i; K++) {
        
          nums += +data0.values[K][1];
          // debugger
      }
     
      result.push(nums / Number(i+1));
        continue;
      }
    
      var sum = 0;
      for (var j = 0; j < dayCount; j++) {
        sum += +data0.values[i - j][1];
      }
      result.push(sum / dayCount);
    }
    // console.log(result)
    return result;
  }
  option = {
    backgroundColor: '',
    title: {
      text: textt,
      left: 0
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      formatter: function (params, ticket, callback) {
        var result = params[0].name + '警情状况：' + '<br/>';

        params.forEach((item) => {
          if (
            '警情' === item.seriesName &&
            item.value[1] &&
            item.value[1].toFixed
          ) {
            result += '警情数：' + item.value[1].toFixed(0) + '<br/>'; //item.value[0] 是index
          } else if (
            item.value &&
            item.value.toFixed &&
            !['open', 'close', 'lowest', 'highest'].includes(item.seriesName)
          ) {
            result += item.seriesName + '：' + item.value.toFixed(0) + '<br/>';
          }
        });
        result += '周环比：' + 9.22 + '%<br/>';
        result += '年同比：' + 6 + '%<br/>';
        return result;
      }

    },
   
  //   tooltip: {
  //   trigger: 'axis',
  //   axisPointer: {
  //     animation: false,
  //     type: 'cross',
  //     lineStyle: {
  //       color: '#376df4',
  //       width: 2,
  //       opacity: 1
  //     }
  //   }
  // },
    legend: {
      // show: false,
      // data: ['警情趋势', '环比']
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: data0.categoryData,
      boundaryGap: false,
      axisLine: { onZero: false },
      splitLine: { show: false },
      min: 'dataMin',
      max: 'dataMax'
    },
    yAxis: {
      scale: true,
      splitArea: {
        show: true
      }
    },
    dataZoom: [
      {
        type: 'inside',
        start: 50,
        end: 100
      },
      {
        show: true,
        type: 'slider',
        top: '90%',
        start: 50,
        end: 100
      }
    ],
    series: [
      {
        name: '警情波动量',
        type: 'candlestick',
        data: data0.values,
        label: {
          show: true,
          position: 'top',
          formatter: function (param) {
            console.log(123, param);
            return param.value.toString();
          }
        },
        itemStyle: {
          color: '#ec0000',
          color0: '#00da3c'
        }
      },
      {
        name: '2周均线',
        type: 'line',
        data: calculateMA(2),
        smooth: true,
        lineStyle: {
          opacity: 0.5
        }
      },
      {
        name: '4周均线',
        type: 'line',
        data: calculateMA(4),
        smooth: true,
        lineStyle: {
          opacity: 0.5
        }
      },
      {
        name: '12周均线',
        type: 'line',
        data: calculateMA(12),
        smooth: true,
        lineStyle: {
          opacity: 0.5
        }
      },
      {
        name: '24周均线',
        type: 'line',
        data: calculateMA(24),
        smooth: true,
        lineStyle: {
          opacity: 0.5
        }
      }
    ]
  };

  option && myChart.setOption(option);
}

onMounted(() => {
  getList(echarts1);
 

});
interface importEchartsInterface {
    name: string|number,
    value: string|number
  
}
let importEcharts = ref<importEchartsInterface[]>([])



   //前端解析表格
   const readExcel =   (e:any)=>{
            // 读取表格文件
            // let that = this;
            return false
            const files = e.target.files;
            if (files.length <= 0) {
                return false;
            } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {

                // this.$Message.warning('上传格式不正确，请上传xls或者xlsx格式');
                return false;
            } else {
                // 更新获取文件名
                // that.upload_file = files[0].name;
            }
            // console.log(files,'files')

            const fileReader = new FileReader();
            fileReader.onload = ev => {
                try {
                    const data = ev.target.result;
                    // console.log( 'data',data)
                    const workbook = XLSX.read(data, {
                        type: "binary", cellDates: true
                    });
                    console.log(workbook, 'wsname')
                    const wsname = workbook.SheetNames[0]; //取第一张表
                    const header = getHeaderRow(workbook.Sheets[wsname]);
                    console.log("读取的excel表头数据（第一行）", header);
                    if (JSON.stringify(header) == JSON.stringify(that.listHead)) {
                        const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
                        console.log(ws, 'ws')
                        // that.lists = JSON.parse(JSON.stringify(ws))
                        // that.assemblyData()
                    } else {
                        // that.$Message.error('导入表格和初始模板不同,请下载模板重新导入');
                        // that.clearImport()
                    }
                } catch (e) {
                    console.log(e, 'error')
                    return false;

                }
            };
            fileReader.readAsBinaryString(files[0]);
        }
        //获取表头数据
  const     getHeaderRow = (sheet:any)=> {
            const headers = []; // 定义数组，用于存放解析好的数据
            const range = XLSX.utils.decode_range(sheet["!ref"]); // 读取sheet的单元格数据
            let C;
            const R = range.s.r;
            /* start in the first row */
            for (C = range.s.c; C <= range.e.c; ++C) {
                /* walk every column in the range */
                const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
                /* find the cell in the first row */
                let hdr = "UNKNOWN " + C; // <-- replace with your desired default
                if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
                headers.push(hdr);
            }
            return headers; // 经过上方一波操作遍历，得到最终的第一行头数据
        }


        import { ElMessage, ElMessageBox } from 'element-plus'

import type { UploadProps, UploadUserFile } from 'element-plus'

const fileList = ref<UploadUserFile[]>([
 
])

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

const beforeRemove: UploadProps['beforeUpload'] = (uploadFile:any, uploadFiles:any) => {
  console.log(uploadFile)
  readExcel(uploadFile)
 return true
}
</script>
<template>
  <div class="common-layout">
    <div class="text"> 大屏页面</div>
    <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-upload="beforeRemove"
    :limit="3"
    :on-exceed="handleExceed"
  >
    <el-button type="primary">Click to upload</el-button>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500KB.
      </div>
    </template>
  </el-upload>
    <div class="center">
      <div class="echarts" ref="echarts1"></div>
    </div>



  </div>
</template>

<style scoped lang="scss">
.common-layout {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
  overflow: hidden;

  .text {
    text-align: center;
  }

  .center {
    width: 100%;
    height: 95%;

    background-color: #5489b8;

    .echarts {
      width: 1200px;
      height: 400px;
      background-color: #19466d;
    }
    
  }

}
</style> -->
